import React, { Component, Suspense } from "react";
import "sass/weiketang.scss";
import ImgListBox from "components/stands/ImgListBox";
import CategoryBox from "components/stands/CategoryBox";
import SwiperBox from "components/stands/SwiperBox";
import { Connect } from "hoc/Connect";
import { Link } from "react-router-dom";
import http from "service/weketang";
import MyBackTop from "components/MyBackTop";

class WeiKeTang extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      classNames: ['zhuanjiajiangzuo', 'qiyejieshao', 'chanpinyanjiu','yingjizhishi'],
      weketangTypeData:{}
    };
  }
  async componentDidMount () {
    await this.props.getwktLists()
    await this.getTypeDate()
  }

  componentWillUnmount () {
  }

  getTypeDate = async ()=>{
    let { classList} = this.props.wktLists
    let newObj = {}
    classList.forEach(async item=>{
      let newDates = await http.getwktType({
        current: 1,
        classification: item.miroclassClassName,
        industryCategory: '',
        name: 0
      })
      let { records } = newDates.list
      newObj[item.miroclassClassName] = !!records.length ? records.slice(0, 4) : []
      this.setState((prevState) => ({
        weketangTypeData: newObj
      }))
    })
    
  }
  render () {
    let { classNames, weketangTypeData} = this.state
    let { wktLists} =this.props
    return (
      <div className="wrapper weketang-home">
        <SwiperBox />

        <div className="icon-navs clearfix">
          {
            wktLists.classList && wktLists.classList.map((item,index)=>{
              return(
                <div className="item" key={index}>
                  <Link to={`/stands/weiketangList/kecheng/${item.miroclassClassName}`} className={classNames[index]}>
                    <h4>{item.miroclassClassName}</h4>
                    <p>{item.description}</p>
                  </Link>
                </div>
              )
            })
          }
        </div>
        {/* 分类入口 */}
        {wktLists.categoryList && (<CategoryBox Content={wktLists.categoryList} LinkUrl='/stands/weiketangList/hangye' />)}

        <div className="model">
          <div className="header">
            <h3>最新课程</h3>
          </div>
          <div className="kecheng-figure-news-list">
            <ul className="clearfix">
              {wktLists.newClassList && wktLists.newClassList.map((item, index) => {
                return (
                  <ImgListBox DataList={item} key={`id_${index}`} LinkUrl='/stands/weiketangDetail' />
                )
              })}
            </ul>
          </div>
        </div>

        {/* 通栏广告位1 */}
        <div className="ad-box weketang">
          <div>
            <a href="/">
              <img src={`https://yjw-image.oss-cn-shenzhen.aliyuncs.com/yjwSit/20200324-111-rc-upload-1585014058883-106.jpeg?time=${Date.parse(new Date())}`} alt="" />
            </a>
          </div>
        </div>
        {
          !!Object.keys(weketangTypeData).length && Object.keys(weketangTypeData).map((item, index) => {
              return (
                <div className="model" key={index}>
                  <div className="header">
                    <h3>{item}</h3>
                  </div>
                  <div className="kecheng-figure-news-list">
                    <ul className="clearfix">
                      {weketangTypeData[item] && weketangTypeData[item].map((itmeTwo, ind) => {
                        return (
                          <ImgListBox DataList={itmeTwo} key={`id_${ind}`} LinkUrl='/stands/weiketangDetail' />
                        )
                      })}
                    </ul>
                  </div>
                </div>
              )
          })
        }
        <MyBackTop />
      </div>
    );
  }
}

export default Connect({
  name: 'weketangStore',
  need: [],
  func: ['getwktLists'],
}, WeiKeTang);